import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import router from '@/router'
import { getTimeStamp } from '@/utils/auth'
const TimeOut = 8 * 60 * 60 * 1000 // 8个小时：8 * 60 * 60 * 1000 毫秒数

const request = axios.create({
  // yarn dev -> .env.development
  // yarn build:prod -> .env.production
  // 有两种方式去区分当前环境：process.env.NODE_ENV -> 'development' 'production'
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 3000
})

/**
 * 请求拦截器
 */
request.interceptors.request.use(config => {
  // 这里，是每个请求在正式发起网络请求之前，都会执行的一个地方
  // 判断，如果有 token 的，可以统一给所有的配置项 config
  // 需要判断，当前请求是否在 token 的有效期内
  if (store.getters.token) {
    // 当前有token的情况下，再去判断当前token是否超时
    if (tokenIsTimeout()) {
      // 超时
      // 把 原先存储的 token 清除
      store.dispatch('user/logout')
      // 跳转到登录页让用户登录
      router.push('/login')
      return Promise.reject(new Error('登录时效超时，请重新登录'))
    }
    config.headers['Authorization'] = `Bearer ${store.getters.token}`
  }
  return config
})

/**
 * 响应拦截器
 */
request.interceptors.response.use(
  res => {
    // 可以提前将服务器数据返回
    const { success, message, data } = res.data
    if (success) {
      return data
    } else {
      // 请求是成功，但是没有正常返回信息
      Message.error(message) // 提示请求错误给用户
      return Promise.reject(message)
    }
  },
  error => {
    // 被动处理（前后端约定的错误码：10002）
    // 先看有没有 response
    if (
      error.response &&
      error.response.data &&
      error.response.data.code === 10002
    ) {
      // 当等于10002的时候 表示 后端告诉我token超时了
      store.dispatch('user/logout') // 登出action 删除token
      router.push('/login')
    } else {
      // 此处请求，没有成功
      Message.error(error.message) // 提示请求错误给用户
    }
    return Promise.reject(error) // 返回给调用者一个失败状态下的 promise
  }
)

// 当前token是否超时
function tokenIsTimeout() {
  // 当前时间
  const currentTime = Date.now()
  // 原先存储token的时时间
  const prevTime = getTimeStamp()
  // 当前时间 - 原先存储token的时间 > TimeOut // 已经超时了
  return currentTime - prevTime > TimeOut
}

// 将请求实例导出
export default request

// import axios from 'axios'
// import { MessageBox, Message } from 'element-ui'
// import store from '@/store'
// import { getToken } from '@/utils/auth'

// // 创建一个 axios 的实例对象
// const service = axios.create({
//   // 当：yarn serve 会默认找 .env.development 文件
//   // 当：yarn build 会默认找 .env.production 文件
//   // 请求路径url = 基础路径 + 请求路径
//   baseURL: process.env.VUE_APP_BASE_API,
//   // 设置当进行了跨域请求是否进行携带 cookies 凭证
//   // withCredentials: true,
//   // 设置超时时间，单位是毫秒
//   timeout: 5000
// })

// // 设置请求拦截器
// service.interceptors.request.use(
//   config => {
//     // 发请求期间成功时会执行的回调，并且可以在此期间在真正发起请求之前进行添加携带项

//     // 此时，有没有 token 呀
//     if (store.getters.token) {
//       // 如果有的话，我们让每个请求都进行携带 token
//       // ['X-Token'] 是一个自定义的请求头的key
//       // 请按正式的请求，给这个key添加值
//       config.headers['X-Token'] = getToken()
//     }
//     // 最后，需要将 配置对象 config 返回（这一句话，不能丢）
//     return config
//   },
//   error => {
//     // 请求失败时，会执行
//     console.log(error)
//     // 返回了一个失败状态的 promise，并且把错误对象当做失败的原因，进行返回
//     return Promise.reject(error)
//   }
// )

// // 设置响应拦截器
// service.interceptors.response.use(
//   /**
//    * If you want to get http information such as headers or status
//    * Please return  response => response
//   */

//   /**
//    * Determine the request status by custom code 50008 50012
//    * Here is just an example
//    * You can also judge the status by HTTP Status Code 401 404 200 500
//    */
//   response => {
//     // 如果当请求正常发送，之后，并且数据了做了正常返回
//     const res = response.data

//     // 如果自定义code不是 20000，给出错误提示
//     if (res.code !== 20000) {
//       Message({
//         message: res.message || 'Error',
//         type: 'error',
//         duration: 5 * 1000
//       })

//       // 50008 是不合法的token 50012 在其他客户端进行登陆了 50014 token 过期了
//       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
//         // 让其去重新登录
//         MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
//           confirmButtonText: 'Re-Login',
//           cancelButtonText: 'Cancel',
//           type: 'warning'
//         }).then(() => {
//           // 这里的成功回调，是会当用户点击了确认按钮，会执行
//           store.dispatch('user/resetToken').then(() => {
//             // 页面，重新加载，不会影响之前的 路由规则
//             location.reload()
//           })
//         })
//       }
//       // 直接把错误信息进行返回
//       return Promise.reject(new Error(res.message || 'Error'))
//     } else {
//       // 请求成功的情况下，将 res 返回（此时，已经是服务器正常返回的数据了）
//       return res
//     }
//   },
//   error => {
//     console.log('err' + error) // 给调式用
//     // 5秒钟弹框提示用户
//     Message({
//       message: error.message,
//       type: 'error',
//       duration: 5 * 1000
//     })
//     // 返回一个失败状态下的 promise
//     return Promise.reject(error)
//   }
// )

// // 到处 axios 实例
// export default service
